<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bar Animation</title>
    <script src="../dist/zrender.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/zrender@4.2.0/dist/zrender.js"></script> -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <script type="text/javascript">
        var N = 10000;
        console.time('init');
        for (var k = 0; k < 1; k++) {
            var div = document.createElement('div');
            var width = 600;
            var height = 300;
            div.style.width = width + 'px';
            div.style.height = height + 'px';
            document.body.appendChild(div);
            // 初始化zrender
            var zr = zrender.init(div, {
                renderer: 'canvas'
            });
            let barShapes = [];

            for (var i = 0; i < N; i++) {
                var h = height * Math.random();
                var barShape = new zrender.Rect({
                    height: h,
                    shape: {
                        x: i * width / N,
                        y: height,
                        width: width / N,
                        height: 0
                    },
                    style: {
                        fill: 'rgb(0, 0, 180)'
                    },
                    onmouseover: function () {
                        this.animateStyle()
                            .when(200, {
                                fill: 'rgb(180, 0, 0)'
                            })
                            .start();
                    },
                    onmouseout: function () {
                        this.animateStyle()
                            .when(200, {
                                fill: 'rgb(0, 0, 180)'
                            })
                            .start();
                    }
                });
                zr.add(barShape);
                barShapes.push(barShape);
            }

            console.time('animate');
            barShapes.forEach(barShape => {
                // barShape.animate('shape').when(500, {
                //     height: barShape.height,
                //     y: height - barShape.height
                // }).start();
                barShape.animateTo({
                    shape: {
                        height: barShape.height,
                        y: height - barShape.height
                    },
                    style: {
                        fill: 'red'
                    }
                }, { duration: 500 });
            })
            console.timeEnd('animate');
        }
        console.timeEnd('init');
    </script>
</body>
</html>